<template>
	<view class="type-tag" :class="{
		'active': active
	}" @click="click">
		{{ text }}
	</view>
</template>

<script setup>
	import {
		defineEmits
	} from 'vue';
	const props = defineProps({
		text: String,
		active: Boolean
	})
	const emit = defineEmits(['tag-event']);
	const click = () => {
		emit('tag-event')
	}
</script>

<style lang="scss" scoped>
	.type-tag {
		width: max-content;
		padding: 8rpx 24rpx;
		line-height: 52rpx;
		background: #F5F5F5;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #333333;
		margin-right: 16rpx;
	}

	.active {
		color: #1677FF !important;
		background: #E3EFFF !important;
	}
</style>